<template>
  <div>
    <!-- 教育经历 -->
    <div>
      <!-- 第一行 -->
      <el-row>
        <p class="pinformation">教育经历</p>
        <p class="totalStyle">共 {{ sysOrgCertificateList.length }} 条数据</p>
        <el-row style="margin-bottom: 5px; margin-left: 20px">
          <el-button type="success" link icon="Plus" @click="addOrgId">新增</el-button>
        </el-row>
      </el-row>

      <!-- 教育经历table 表格 -->
      <el-table :data="sysOrgCertificateList" class="business" ref="educateTableRef">
        <el-table-column align="center" prop="school" label="学校" />
        <el-table-column align="center" prop="zy" label="专业"></el-table-column>
        <el-table-column align="center" prop="xl" label="学历" width="110">
          <template #default="scope">
            <dict-tag :options="sys_xl" :value="scope.row.xl" />
          </template> </el-table-column>>
        <el-table-column align="center" prop="xw" label="学位" width="90">
          <template #default="scope">
            <dict-tag :options="sys_xw" :value="scope.row.xw" />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="startDate" label="开始时间" width="120"></el-table-column>
        <el-table-column align="center" prop="endDate" label="结束时间" width="120" />
        <el-table-column align="center" prop="name" label="操作" width="150">
          <template #default="scope">
            <el-button link type="success" icon="EditPen" @click="handleListEditor(scope.row)">编辑</el-button>
            <el-button link type="success" icon="Delete" @click="handleListDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :class="'el-dialog-theme3'" v-model="open" :title="title" append-to-body draggable
        :close-on-click-modal="false">
        <el-form label-width="85px" :model="userEduForm" :rules="rules" ref="listRef">
          <el-form-item label="学校名称：" prop="school">
            <el-input maxlength="100" clearable placeholder="请输入学校名称" v-model="userEduForm.school" />
          </el-form-item>
          <el-form-item label="专业：">
            <el-input maxlength="100" clearable placeholder="请输入专业" v-model="userEduForm.zy" />
          </el-form-item>
          <el-row>
            <el-col :span="8">
              <el-form-item label="学历：" prop="orgMc">
                <el-select v-model="userEduForm.xl" class="m-2" style="width: 100%" placeholder="请选择学历" filterable>
                  <el-option v-for="item in sys_xl" :key="item.value" :label="item.label" :value="parseInt(item.value)" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4"></el-col>
            <el-col :span="12">
              <el-form-item label="学位：" prop="orgMc">
                <el-select v-model="userEduForm.xw" class="m-2" placeholder="请选择学位">
                  <el-option v-for="item in sys_xw" :key="item.value" :label="item.label" :value="parseInt(item.value)" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="起止时间：">
                <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
                  start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="success" @click="sava">保存</el-button>
            <el-button @click="Cancel" type="danger">取消</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    <!-- 工作经历 -->
    <div>
      <!-- 第一行 -->
      <el-row>
        <p class="pinformation">工作经历</p>
        <p class="totalStyle">
          共 {{ sysOrgCertificateListone.length }} 条数据
        </p>
        <el-row style="margin-bottom: 5px; margin-left: 20px">
          <el-button type="success" link icon="Plus" @click="workaddOrgId">新增</el-button>
        </el-row>
      </el-row>
      <!-- 工作经历table 表格 -->
      <el-table :data="sysOrgCertificateListone" ref="listTableRef">
        <el-table-column align="center" prop="workName" label="单位" />
        <el-table-column align="center" prop="zw" label="职务">
          <!-- <template #default="scope">
            <dict-tag :options="sys_xl" :value="scope.row.zw" />
          </template>-->
        </el-table-column>
        <el-table-column align="center" prop="zc" label="职称" width="120">
          <template #default="scope">
            <dict-tag :options="sys_zc" :value="scope.row.zc" />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="startDate" label="开始时间" width="120"></el-table-column>
        <el-table-column align="center" prop="endDate" label="结束时间" width="120" />
        <el-table-column align="center" prop="name" label="操作" width="150">
          <template #default="scope">
            <el-button link type="success" icon="EditPen" @click="workhandleListEditor(scope.row)">编辑</el-button>
            <el-button link type="success" icon="Delete" @click="workhandleListDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 工作经历弹窗 -->
      <el-dialog :class="'el-dialog-theme3'" v-model="workOpen" :title="title" append-to-body draggable
        :close-on-click-modal="false">
        <el-form label-width="85px" :model="userWorkForm" :rules="rules" ref="workListRef">
          <el-form-item label="单位名称：" prop="workName">
            <el-input clearable maxlength="100" placeholder="请输入单位名称" v-model="userWorkForm.workName" />
          </el-form-item>
          <el-form-item label="职务：">
            <el-input maxlength="100" clearable placeholder="请输入职务" v-model="userWorkForm.zw" />
          </el-form-item>
          <el-row>
            <el-col :span="8">
              <el-form-item label="职称：" prop="zc">
                <el-select v-model="userWorkForm.zc" class="m-2" placeholder="请选择职称" style="width: 100%">
                  <el-option v-for="item in sys_zc" :key="item.value" :label="item.label" :value="parseInt(item.value)" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="起止时间：">
                <el-date-picker v-model="dateRange2" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
                  start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12"></el-col>
          </el-row>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="success" @click="worksava">保存</el-button>
            <el-button @click="workCancel" type="danger">取消</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
// const EduList = computed(() => userStore.userEduForm);
import { getSendEduList, getSendWorkList, eduSave, workSave, getEduView, getWorkView, eduDel, workDel } from "@/api/system/newUser";
const { proxy } = getCurrentInstance();
const emits = defineEmits(["queryParam"]["areaCode"]);

const userEduForm = ref({ xl: 0 });

const userWorkForm = ref({});

const dateRange = ref([]);

const data = reactive({
  rules: {
    school: [{ required: true, message: "不能为空", trigger: "blur" }],
    workName: [{ required: true, message: "不能为空", trigger: "blur" }],
  },
});

const { queryParams, form, rules, certificateRules } = toRefs(data);

const certificateForm = ref({});
const sysOrgCertificateList = ref([]);
const sysOrgCertificateListone = ref([]);

// //新增按钮的方法 点击弹出 弹框
const { sys_xw, sys_xl, sys_zc } = proxy.useDict("sys_xw", "sys_xl", "sys_zc");
const title = ref("");
const open = ref(false);
const workOpen = ref(false);

function addOrgId() {
  open.value = true;
  if (proxy.$refs["listRef"]) {
    proxy.$refs["listRef"].clearValidate();
  }
  delete certificateForm.value.eduId;
  userEduForm.value = { xl: 6 };
  title.value = "新增教育经历"
}

//
function workaddOrgId() {
  workOpen.value = true;
  if (proxy.$refs["listRef"]) {
    proxy.$refs["listRef"].clearValidate();
  }
  delete certificateForm.value.workId;
  userWorkForm.value = {};
  title.value = "新增工作经历"
}
//保存方法
function sava() {
  if (dateRange.value.length) {
    proxy.$refs["listRef"].validate((valid) => {
      if (valid) {
        if (dateRange.value.length) {
          userEduForm.value.startDate = dateRange.value[0];
          userEduForm.value.endDate = dateRange.value[1];
        }
        userEduForm.value.userId = props.userId
        eduSave(userEduForm.value).then(res => {
          proxy.$modal.msgSuccess('保存成功')
          open.value = false;
          getEduList()
        })
      }
    });
  } else {
    proxy.$modal.msgError('请选择起止时间')
  }
}
function Cancel() {
  // proxy.$refs["listRef"].clearValidate();
  open.value = false;
}

const dateRange2 = ref([]);

function worksava() {
  if (dateRange2.value.length) {
    proxy.$refs["workListRef"].validate((valid) => {
      if (valid) {
        //
        if (dateRange2.value.length) {
          userWorkForm.value.startDate = dateRange2.value[0];
          userWorkForm.value.endDate = dateRange2.value[1];
        }
        // jiekou
        userWorkForm.value.userId = props.userId
        workSave(userWorkForm.value).then(res => {
          proxy.$modal.msgSuccess('保存成功')
          workOpen.value = false;
          getWorkList()
        })
      }
    });
  } else {
    proxy.$modal.msgError('请选择起止时间')
  }
}

function workCancel() {
  // proxy.$refs["listRef"].clearValidate();
  workOpen.value = false;
}

const props = defineProps({
  userId: {
    type: String,
  },
});

function getEduList() {
  getSendEduList({ userId: props.userId }).then((res) => {
    sysOrgCertificateList.value = res.data
  });
}
function getWorkList() {
  getSendWorkList({ userId: props.userId }).then((res) => {
    sysOrgCertificateListone.value = res.data
  });
}

function getList() {
  getEduList()
  getWorkList()
}

getList();

// 记得暴露
defineExpose({});
function handleListDelete(row) {
  proxy.$modal
    .confirm("是否确认该条删除数据项？")
    .then(function () {
      eduDel(row.eduId).then(res => {
        getEduList()
        proxy.$modal.msgSuccess("删除成功");
      })
    })
    .catch(() => { });
}
function workhandleListDelete(row) {
  proxy.$modal
    .confirm("是否确认该条删除数据项？")
    .then(function () {
      workDel(row.workId).then(res => {
        getWorkList()
        proxy.$modal.msgSuccess("删除成功");
      })
    })
    .catch(() => { });
}

function handleListEditor(row) {
  getEduView(row.eduId).then(res => {
    userEduForm.value = res.data
    dateRange.value = [res.data.startDate, res.data.endDate]
    open.value = true
    title.value = "编辑教育经历"
  })
}
function workhandleListEditor(row) {
  getWorkView(row.workId).then(res => {
    userWorkForm.value = res.data
    dateRange2.value = [res.data.startDate, res.data.endDate]
    workOpen.value = true
    title.value = "编辑工作经历"
  })
}

const heightParams = ref([
  { tableName: "educate", bottomHeight: 450 },
  { tableName: "list", bottomHeight: 21 },
]);
function getTableHeight() {
  proxy.adaptiveHeight(proxy, heightParams.value);
}
onMounted(() => {
  nextTick(() => {
    getTableHeight();
    window.addEventListener("resize", getTableHeight);
  })
})
onUpdated(() => {
  nextTick(function () {
    getTableHeight();
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getTableHeight);
});
</script>
